<template>
	<Layout class-name="bgff layout-bg match showH">
    <fa-navbar title="开溜吧"></fa-navbar>
    
    <zb-tab-group :list="tabList" v-model="tabId" @change="chooseTabId" />
    <empty :show="emptyShow" />
    <view class="shaishi-list box">
      <match-item v-for="(item, index) in list" :key="index" :item="item" @toDetail="linkTo" />
    </view>
  </Layout>
</template>

<script>
	export default {
		data() {
			return {
				keyWords:'',	
        isDelShow:false,
        tabList:[
          {name:'全部', id:0},
          {name:'报名中', id:2},
          {name:'待开赛', id:3},
          {name:'开赛中', id:4},
          {name:'已结束', id:5},
        ],
        tabId:0,
        emptyShow:false,
        list:[],
        isLast:false,
        status:''
			}
		},
    onLoad(){
      this.getList()
    },
		methods: {
      getList(){
        this.$api.activityMoreListsApi({page:this.page, status:this.status === 0 ? '' : this.status}).then(res=>{
          if(!this.isLast) {
            this.page++;
            this.list = [...this.list, ...res.data.data];
            this.isLast = false;
          }else{
            this.isLast = true;
          }
          this.emptyShow = this.list.length == 0
        })
      },
			search(value) {
				
			},
      chooseTabId(id){
        if(this.status == id) return;
        this.status = id;
        
        this.list = [];
        this.isLast = false;
        this.page = 1;
        this.getList()
      },
      linkTo(item){
        console.log('进入详情页', item)
        uni.navigateTo({
          url:'/home/match/detail?id='+item.id
        })
      }
			
		},
    onPageScroll(e) {
      getApp().setNavFixed(this,e)
    },
    onReachBottom() {
      if(!this.isLast){
        this.getList()
      }
    }
	}
</script>

<style lang="scss" scoped>



</style>
